 <template>
      <div class="container">
 
        <div class="content">
             <div class="el-row"><el-text type="primary">克隆声音</el-text></div>
             <div class="el-row"><el-text >封面图(可选)</el-text></div>

          <div   class="el-row" >
            <el-upload
    class="avatar-uploader"
    action=""
    :show-file-list="false"
     :on-change	="imgUpload"
     :auto-upload="false"
  >
    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>
</div>
      <div class="el-row"><el-text >名称</el-text></div>
<div  class="el-row"><el-input v-model="roleName" type="text"  /></div>
<div  class="el-row"><el-text >上传音频</el-text></div>
<div   class="el-row" >
            <el-upload
     action=""
    :show-file-list="false"
     :on-change	="musicUpload"
     :auto-upload="false"
  >
    <span>添加上传音频文件</span>
  </el-upload>
</div>
<div v-if="musicUrl">
  <PlayNewCs    ref="playRef" :src="musicUrl" :key="playNewCsKey">
        <span>{{musicFile.name  }}</span>
        <el-button type="primary" @click="play()" plain>播放试听</el-button>
      </PlayNewCs>
</div>
<div  class="el-row"><el-button @click="createRole"  type="primary" plain>创建</el-button></div>

          

 
        </div>
        <div class="task_list">
      <el-row>任务列表</el-row>
      <el-row style="  border: 1px solid var(--el-border-color);
    border-radius: var(--el-border-radius-base);padding: 30px;"
    v-for="(task, index) in taskList" :key="index"
    >
        <el-row>
          <el-col :span="5">
            <div><img :src="avatar"></div>

          </el-col>
          <el-col :span="4" style="  display: flex; align-items: center">

           {{ task.roleName }}

          </el-col>
          <!-- <el-col :span="14" style="text-align: right; ">
            <div @click="down(task.soundUrl)">下载</div>

          </el-col> -->
        </el-row>
 
      </el-row> 
   
 

    </div>


 
     </div>
</template>
<script setup>
import PlayNewCs from '@/components/PlayNewCs.vue';
import { Plus } from '@element-plus/icons-vue';
import { ref } from 'vue';
import  request from '../request'

 const imageUrl = ref('')
 const imageFile=ref('')
 const musicUrl = ref('')
 const musicFile=ref('')
 const roleName=ref('');

 const playRef = ref(null);
 const playNewCsKey=ref(0);
 const taskList = ref([  ]  )
 let submitTask=null;
 let interval=  null;



function imgUpload (uploadFile
  
) {
  imageFile.value=uploadFile.raw;
  imageUrl.value = URL.createObjectURL(imageFile.value)
}
function musicUpload(uploadFile){
  musicFile.value=uploadFile.raw;
  musicUrl.value = URL.createObjectURL(musicFile.value)

  playNewCsKey.value= playNewCsKey.value+1;
  console.log(musicUrl.value);



 }
 function createRole(){
  console.log(musicFile.value);

      let formData = new FormData();
      formData.append('headFile', imageFile.value);
      formData.append('musicFile', musicFile.value);
      formData.append('roleName', roleName.value);

      
      request  .post('app/dubRole/createDubRole',formData)
      .then(function (data){
           //成功
     

       
          console.log(data);
          submitTask=data;
          interval= setInterval(updateTaskList, 5000);

       })
      .catch(function (error) { // 请求失败处理
        console.log(error);
      });

  }
  function play(){
     console.log(musicUrl.value);

     playRef.value.playAudio ();
 

 }
 request  .get('app/dubRole/cloneRecordListByUser')
      .then(function (data){
           //成功
 
           data.forEach(element => {
            if(element.cloneStatus==2){
              let task={
              roleId:element.roleId,
              roleName:element.roleName
            }
 
            taskList.value.push(task);
            }
            console.log(taskList);

           });


 
       })
      .catch(function (error) { // 请求失败处理
        console.log(error);
      });

 function  updateTaskList (){
 

 if(submitTask!=null){
   console.log("updateTaskList"+submitTask);
   request  .get('app/dubRole/roleById?roleId='+submitTask)
 .then(function (data){
   if(data.cloneStatus==2){
    alert("成功");
  //成功
  let task={
         roleId:data.roleId,
         roleName:data.roleName
       }
      taskList.value.push(task);
      submitTask=null;

   }



  })
 .catch(function (error) { // 请求失败处理
   console.log(error);
 });
 }else{
   console.log("clearInterval");
   clearInterval(interval);
 }

  
   
 }
</script>
<style scoped>

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.container {
  width: 100%;

  display: flex;
  flex-wrap: wrap;
  /* 如果需要换行，可以设置为wrap */
}

.content {
  padding-top: 20px;
  padding-left: 50px;
  padding-right: 50px;
  width: 50%;
  height: 100%;
  border-right: 1px solid var(--el-border-color);
}
.task_list {
  width: 30%;
  padding-left: 50px;
  padding-right: 50px;


}
.el-row {
   width: 100%;
   margin-bottom: 20px;

}

.task_list img {
  width: 80px;
  /* 你可以根据需要调整宽度 */
  height: 80px;
  /* 保持图像的纵横比 */
  border-radius: 10px;
  /* 圆角半径，可以根据需要调整 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* 可选：添加阴影以增强效果 */
}
</style>
<style >
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>